<template>
  <div style="display: flex;">
    <a-tabs v-model:activeKey="activeTab" tabPosition="left" style="min-width: 200px;margin-top: 40px;margin-left: 100px;">
      <a-tab-pane key="customization" tab="开始定制" style="padding-left: 60px;">
        <!-- 开始定制面板的内容 -->
        <a-steps :current="currentStep" direction="vertical">
          <a-step v-for="(step, index) in steps" :key="step.title" :title="step.title">
            <template #description>
              <div v-if="index === currentStep">
                <a-checkbox v-model:checked="step.required" style="margin: 10px;">我不需要此步骤</a-checkbox>
                <div v-if="!step.required">
                  <a-select v-model:value="step.shop" style="width: 100%; width:800px; margin: 10px;" placeholder="请选择店铺">
                    <a-select-option v-for="shop in shops" :key="shop.value" :value="shop.value">{{ shop.title }}</a-select-option>
                  </a-select>
                  <div v-if="step.shop">店铺价目详情：{{ getPriceDetail(step.shop) }}</div>
                  <a-textarea v-model:value="step.remarks" placeholder="请输入您的需求备注" style="height: 100px; width:800px; overflow-y: auto; margin: 10px;resize: none;" />
                </div>
                <div>
                  <a-button type="primary" @click="prevStep" v-if="currentStep > 0">上一步</a-button>
                  <a-button type="primary" @click="nextStep" v-if="currentStep < steps.length - 1">下一步</a-button>
                  <a-button type="primary" @click="submitCustomization" v-else>提交定制</a-button>
                </div>
              </div>
            </template>
          </a-step>
        </a-steps>
      </a-tab-pane>
      <a-tab-pane key="myOrders" tab="我的定制">
        <!-- 我的定制面板的内容 -->
        <div style='text-align: center;'>
          <b>定制时间：{{ order.customizationTime }}</b>
          <b>订单编号：{{ order.orderNumber }}</b>
          <b>支付状态：{{ order.paymentStatus }}</b>
          <a-button type="primary" @click="sendReminder">催促</a-button>
          <a-button type="primary" @click="contactSupport">联系客服</a-button>
        </div>
        <a-table :dataSource="order.data" :columns="columns" style="width: 1200px" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted} from 'vue';

const activeTab = ref('customization');
const currentStep = ref(0);
const steps = ref([
  { title: '原料', value: 'material', required: false, shop: undefined, remarks: '' },
  { title: '设计', value: 'design', required: false, shop: undefined, remarks: '' },
  { title: '建模', value: 'modeling', required: false, shop: undefined, remarks: '' },
  { title: '手工雕刻', value: 'handCarve', required: false, shop: undefined, remarks: '' },
  { title: '机雕', value: 'machineCarve', required: false, shop: undefined, remarks: '' },
  { title: '抛光', value: 'polish', required: false, shop: undefined, remarks: '' }
  // ...其他步骤
]);

// 店铺数据
const shops = ref([
  { title: '店铺A', value: 'shopA', priceDetail: '100' },
  { title: '店铺B', value: 'shopB', priceDetail: '200' },
  // ...其他店铺
]);

const getPriceDetail = (shop) => {
  // 返回店铺的价目详情
  const shopDetail = shops.value.find(s => s.value === shop);
  return shopDetail ? shopDetail.priceDetail : '未知店铺';
};

const nextStep = () => {
  currentStep.value++;
};

const prevStep = () => {
  currentStep.value--;
};

const submitCustomization = () => {
  console.log('提交定制', steps.value);
  // 提交定制的逻辑
};

const columns = [
  {
    title: '步骤',
    dataIndex: 'title',
    key: 'title',
    align: 'center',
  },
  {
    title: '完成状态',
    dataIndex: 'completed',
    key: 'completed',
    align: 'center',
  },
  {
    title: '店铺',
    dataIndex: 'shop',
    key: 'shop',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    key: 'remarks',
    align: 'center',
  },
];

// 订单数据
const order = ref({
  customizationTime: '2023-04-01',
  orderNumber: '1234567890',
  paymentStatus: '未支付',
  data: [
    { title: '原料', value: 'material', required: false, shop: '测试用原料店铺', remarks: '111', completed: '已完成' },
    { title: '设计', value: 'design', required: false, shop: '测试用原料店铺', remarks: '222', completed: '已完成' },
    { title: '建模', value: 'modeling', required: false, shop: '测试用原料店铺', remarks: '333', completed: '已完成' },
    { title: '手工雕刻',value: 'handCarve', required: false, shop: '测试用原料店铺', remarks: '444', completed: '已完成' },
    { title: '机雕', value: 'machineCarve', required: false, shop: '测试用原料店铺', remarks: '555', completed: '已完成' },
    { title: '抛光', value: 'polish', required: false, shop: '测试用原料店铺', remarks: '666', completed: '已完成' }
    // ...其他步骤
    ]
});

const sendReminder = () => {
  // 发送催促的逻辑
  console.log('发送催促');
};

const contactSupport = () => {
  // 联系支持的逻辑
  console.log('联系支持');
};

onMounted(() => {
  //
});
</script>

<style scoped>
button {
  margin: 10px;
}
b{
  margin: 10px;
}
</style>